import {Notification, Input, Modal,} from "@douyinfe/semi-ui";
import {useRef} from "react";

const SetConversation = (props: {
    visible: boolean,
    setVisible: (visible: boolean) => void,
    setConversationName: (name:string) => void,
    refreshList: () => void
}) => {
    //建立一个Ref来获取Input输入框的值
    const inputRef = useRef<any>(null);
    //点击确定按钮
    const handleOk = () => {
        if (inputRef.current) {
            //去除首位空格判断长度
            if (inputRef.current.value.trim().length !== 0) {
                //添加新会话并返回key给父布局刷新
                props.setConversationName(inputRef.current.value)
                props.refreshList()
                //设置为不可见弹窗
                props.setVisible(false);
            } else {
                //如果对话名为空
                const info = {
                    duration: 3,
                    position: 'top',
                    content: '对话名不可为空',
                    title: '警告',
                };
                //显示信息
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                // @ts-expect-error
                Notification.info(info)
            }
        }
    };
    //按了取消
    const handleCancel = () => {
        props.setVisible(false);
    };
    //这里会说缺很多标签，但是不用管，这都是正常的
    return (
        <Modal
            title="请输入对话名"
            visible={props.visible}
            onOk={handleOk}
            onCancel={handleCancel}
            closeOnEsc={true}
        >
            <Input ref={inputRef} placeholder={"请输入对话名"}/>
        </Modal>
    )
}
export default SetConversation;